<template>
  <div class="collapse-content"  :style="{background:(current.title=='培训中'?'#F1F0F5':'')}">
    <div class="top">
      <div class="left">
        <i class="iconfont icon-pingjia iconcolor" :style="{color:( current.title=='培训中'?'#6343E1':current.status=='default'?'#209EE4':'')}"></i>
        <div class="title">{{ current.title }}</div>
      </div>
      <div class="right" v-show="current.role">
        <div class="role">{{ current.role }}：</div>
        <div class="status">{{  statusMap[current.status] }} </div>
      </div>
      <div class="days" v-show="current.title=='培训中'">第{{current.days }}天</div>
    </div>
    <div class="content">
      <TextClamp :content="current.content"></TextClamp>
    </div>
    <div class="bottom">
      <div class="left">操作人：{{ current.operatorInfo.person }}</div>
      <div class="left">操作时间：{{ current.operatorInfo.time }}</div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { computed, ref } from "vue";
import TextClamp from "../../components/TextClamp.vue";
const props = defineProps(['current']);
const current = computed(() => {
  return props.current
})
const colorMap = ref({
  default: {
    background: "#F5F7FB",
    iconColor: "#16C716",
    statusBg: "rgba(22,199,22,0.2)",

  },
  success: {
    background: "#F5F7FB",
    iconColor: "#209EE4",
    statusBg: "rgba(32,158,228,0.2)",
  },
  dieOut: {
    background: "#FBF5F5",
    iconColor: "#FF4242",
    statusBg: "rgba(255,66,66,0.2)",
  },
  surrender: {
    background: "#FBFBF5",
    iconColor: "#F0A03D",
    statusBg: "#f0a03d33",
  }
})


const statusMap = {
  "default": "通过",
  "dieOut": "淘汰",
  "surrender": "放弃"
}
const colorInfo = computed(() => {
  return colorMap.value[current.value.status || 'default']
}) 
</script>

<style lang="less" scoped>
.collapse-content {
  padding: 17px 20px;
  box-sizing: border-box;
  border-radius: 10px;
  background: v-bind('colorInfo.background');
  margin-bottom: 10px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left {
    display: flex;
    gap: 5px;

    .iconcolor {
      color: v-bind('colorInfo.iconColor')
    }
  }

  .right {
    display: flex;
    gap: 5px;

    .status {
      background: v-bind('colorInfo.statusBg');
      color: v-bind('colorInfo.iconColor');
      padding: 0 8px;
      box-sizing: border-box;
      border-radius: 4px;
      ;
    }
  }
}

.content {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 28px;
  font-style: normal;
  text-transform: none;

  .expand {
    font-weight: 400;
    font-size: 16px;
    color: #209EE4;
    line-height: 19px;
    cursor: pointer;
  }
}

.bottom {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #b3c0c8;
  font-size: 16px;
  font-weight: 400
}
.days{
  color: #209EE4;
}
</style>